<script lang="ts" setup>
import { ref, onMounted } from 'vue';

const count = ref(0);
const mocksList = ref([
  {
    name: '随机中文',
    species: '我是随机中文'
  },
]);

const headers = [
  {
    title: 'name',
    align: 'start',
    key: 'name',
  },
  { title: 'species', key: 'species' },
  { title: 'Actions', key: 'actions' },
];
type mockItem = {
  name: string;
  species: string;
}
const copy = (item: mockItem) => {
  console.log('---- copy ----:', item);
}

const refresh = (item: mockItem) => {
  console.log('---- copy ----:', item);
}

onMounted(() => {
  count.value = Math.random();
})
</script>

<template>
  <h1>数据Mock助手</h1>
  <v-data-table :headers="headers" :items="mocksList">
    <template v-slot:item.actions="{ item }">
      <v-icon
        class="me-2"
        size="small"
        @click="copy(item)"
      >
        COPY
      </v-icon>
      <v-icon
        size="small"
        @click="refresh(item)"
      >
        REFRESH
      </v-icon>
    </template>
  </v-data-table>
</template>

<style scoped>
</style>
